<template>
  <div>
    <!-- <topTable :columns='columns' :table-data='tableData' :handleCurrentChange='handleCurrentChanges'></topTable>    -->
    <el-table :data="devs"  style="width: 100%"  @row-click='handleCurrentChanges'  highlight-current-row>
      <el-table-column
        :label="$t('message.name')"
        prop="name">
      </el-table-column>
      <el-table-column  :label="$t('message.medias.maxFmt')" >
        <template  slot-scope="scope">   
          <span>{{ showResolutionOrFmt(scope.row.maxFmt, 0) }}</span>
        </template> 
      </el-table-column>
      <el-table-column  :label="$t('message.medias.maxframeRate')" >
        <template  slot-scope="scope">   
          <span>{{ showResolutionOrFmt(scope.row.maxFmt, 1) }}</span>
        </template> 
      </el-table-column>   
    </el-table> 
    <setForm id="2" v-if="showExportEDID">       
       <template slot="boxTop">{{$t('message.medias.audioSetting')}}</template>
          <template slot="boxMain">                
            <el-row>
            <el-col :span="4" class="col4">  
              <div class="span3">            
                <label>{{$t('message.medias.mute')}}</label>   
              </div>
              <div class="span3">            
                <label>{{$t('message.medias.gain')}}</label>   
              </div>
              <div class="span3" v-show="false">                 
                <label >{{$t('message.medias.phant')}}</label>  
              </div>
              <div class="span3" v-show="false">                                    
                <label v-show="showMic">{{$t('message.medias.sens')}}</label> 
              </div>                             
            </el-col>
            <el-col :span="20" class="col20a1">
              <div class="span17">
              <el-checkbox v-model="mute" @change="onChange">{{$t('message.medias.mute')}}</el-checkbox>
              </div>
              <div class="span17">
              <el-slider v-model="gain" @change="onChange"></el-slider>
              </div>
              <div class="span17" v-show="false">
              <el-checkbox v-model="phant" @change="onChange" v-show="showMic" >{{$t('message.medias.phant')}}</el-checkbox>
              </div>
              <div class="span17" v-show="false">
              <el-slider v-model="sens" @change="onChange" v-show="showMic"></el-slider>
              </div>
            </el-col>
          </el-row>
          </template>
    </setForm>
    <setForm id="3" v-show="show" v-if="!showMic">       
       <template slot="boxTop">{{$t('message.medias.vedioSetting')}}</template>
          <template slot="boxMain">                
            <el-row>
            <el-col :span="4" class="col4v1">     
              <div class="span3">            
                <label>{{$t('message.medias.signalType')}}</label>   
              </div>     
              <div class="span3">            
                <label>{{$t('message.medias.resolution')}}</label>   
              </div>
            </el-col>
            <el-col :span="20" class="col20v1">
              <div class="span17">
              <select v-model="currentRow.signalType" class="span17_elinput">
                <option v-for="option in signalTypes" :key="option">{{option}}</option>
              </select>
              </div>    
              <div class="span17" style="height:130px;">
                 <el-switch v-show="currentRow.signalType !== 'sdi'" v-model="isCustom" :active-text="$t('message.medias.custom')" ></el-switch>
                <div v-if="!isCustom" style="width:100%;margin-top:10px;">
                  <select v-if="currentRow.signalType === 'sdi'" v-model="resolutionWithFramerateOption" class="span17_elinput" style="height:40px;">
                    <option v-for="option in sdiOptions" :key="option.maxFmt" :value="option.maxFmt">{{option.maxFmt}}</option>
                  </select>
                  <select v-else v-model="resolutionWithFramerateOption" class="span17_elinput" style="height:40px;">
                    <option v-for="option in showResolutionWithFramerateOptions" :key="option.maxFmt" :value="option.maxFmt">{{option.maxFmt}}</option>
                  </select>
                </div>              
                <div v-if="isCustom" style="width:100%;margin-top:10px;">
                  <el-input type="number" v-model="resolution.x" style="width:24%"></el-input>X
                  <el-input type="number" v-model="resolution.y" style="width:24%"></el-input>
                  <select v-model="currentRow.framerate" style="width:50%;height:40px;">
                    <option v-for="option in framerates" :key="option" :value="option">{{option}}</option>
                  </select>
                  <span v-show="expandMaxFmt" class="text-style" > {{$t('message.medias.expandMaxFmt') }} </span>  
                </div>              
              </div> 
            </el-col>
          </el-row>
          <el-button  class="btnsave" @click="onSaveVedio">{{$t('message.save')}}</el-button>
          </template>
    </setForm>
    <setForm id="4" v-show="false" v-if="!showMic">       
       <template slot="boxTop">{{$t('message.medias.vedioFastSetting')}}</template>
          <template slot="boxMain">                
            <el-row>
            <el-col :span="4" class="col4">   
               <div class="span3">            
                <label>{{$t('message.medias.bright')}}</label>   
              </div>
              <div class="span3">            
                <label>{{$t('message.medias.saturation')}}</label>   
              </div>
              <div class="span3">                 
                <label >{{$t('message.medias.hue')}}</label>  
              </div>   
              <div class="span3">                 
                <label >{{$t('message.medias.contract')}}</label>  
              </div>                              
            </el-col>
            <el-col :span="20" class="col20v2">                        
            <div class="span17">
               <el-slider v-model="bright" @change="onChange"></el-slider>
            </div>                                                          
            <div class="span17">
               <el-slider v-model="saturation" @change="onChange"></el-slider>
            </div>                                                          
            <div class="span17">
               <el-slider v-model="hue" @change="onChange"></el-slider>
            </div>                                                          
            <div class="span17">
               <el-slider v-model="contrast" @change="onChange"></el-slider>
            </div>     
            </el-col>
          </el-row>
          </template>
    </setForm>
    <setForm id="5" v-if="showExportEDID">       
       <template slot="boxTop">{{$t('message.medias.exportEDID')}}</template>
          <template slot="boxMain">  
            <el-button  class="btnsave" @click="exportEDID">{{$t('message.export')}}</el-button>
          </template>
    </setForm>
   
  </div>
</template>

<script>
import _ from 'lodash'
import { api, getHostName } from "../../../../libs/api";
import setForm from "@/components/setForm";
import mylist from "@/components/MyList";
import ebus from "../../../../libs/ebus";
import { mapState, mapActions } from "vuex";
import topTable from "../../../../components/topTable";
import { downloadFile } from "@/libs/utils";
export default {
  created() {
    ebus.emit("getOutputDevInfo", this);
    this.preventWatchWhenCurChange();
  },
  beforeDestroy() {
    if (this.curChangeTimer) {
      clearTimeout(this.curChangeTimer);
    }
  },
  computed: {
    ...mapState(["media"]),
    ...mapState(["system"]),
    showMic() {
       if(this.currentRow.type) {
          return this.currentRow.type == "mic" || this.currentRow.type == "line";
      }else {
          return this.currentRow.signalType == "mic" || this.currentRow.signalType == "line";
      }
     
    },
    showExportEDID(){
      if(this.currentRow.type) {
         return this.show && this.currentRow.type != 'sdi' && this.currentRow.type != ''
      }else {
         return this.show && this.currentRow.signalType != 'sdi' && this.currentRow.signalType != ''
      }
     
    },
    tableData() {
      var items = [];
      if (this.media.outputDev.devs) {
        items = this.media.outputDev.devs;
        items.forEach(item => {
          item.maxFmt = item.maxFmt.split("@")[0];
        });
      }
      return items;
    },
    computedCurrow() {
      var items = [];
      if (
        this.media &&
        this.media.outputDev &&
        this.media.outputDev.devs &&
        this.media.outputDev.devs[this.index]
      ) {
        items = this.media.outputDev.devs[this.index];
      }
      return items;
    },
    expandMaxFmt(){
      var resolution = '';
      var maxFmt = '';
      if (this.maxFmt) {
        maxFmt = this.maxFmt.toUpperCase()
        if (maxFmt.includes('@')) {
          resolution = this.maxFmt.split('@')[0];
        } else {
          if (maxFmt.includes('P')) {
            resolution = this.maxFmt.split('P')[0] + 'P';
          } else if (maxFmt.includes('K')) {
            resolution = this.maxFmt.split('K')[0] + 'K';
          }
        }
      }
      // var resolution = this.maxFmt.split('@')[0];
      var maxX = 0;
      var maxY = 0;
      var superResolution = resolution.toUpperCase();
      if(superResolution.indexOf('X') > -1){
        maxX = parseInt(superResolution.split('X')[0]);
        maxY = parseInt(superResolution.split('X')[1]);
      } else{
        switch(superResolution){
          case '720P': {
            maxX = 1280;
            maxY = 720;
            break;
          }
          case '1080P': {
            maxX = 1920;
            maxY = 1080;
            break;
          }
          case '4K': {
            maxX = 3840;
            maxY = 2160;
            break;
          }
        }
        
      }

      return this.isCustom && (this.resolution.x  > maxX || this.resolution.y  > maxY || this.resolution.x * this.resolution.y * this.currentRow.framerate > this.limitMaxFmt)
    },
    outOfMaxResolution(){
      var resolution = this.maxFmt.split('@')[0];
      var maxX = 0;
      var maxY = 0;
      var superResolution = resolution.toUpperCase();
      if(superResolution.indexOf('X') > -1){
        maxX = parseInt(superResolution.split('X')[0]);
        maxY = parseInt(superResolution.split('X')[1]);
      } else{
        switch(superResolution){
          case '720P': {
            maxX = 1280;
            maxY = 720;
            break;
          }
          case '1080P': {
            maxX = 1920;
            maxY = 1080;
            break;
          }
          case '4K': {
            maxX = 3840;
            maxY = 2160;
            break;
          }
        }
        
      }
      return this.isCustom && (this.resolution.x  > maxX || this.resolution.y  > maxY)
    },
    showResolutionWithFramerateOptions(){
      var items = this.resolutionWithFramerateOptions;
      if(this.system.productInfo.modelNameId.toUpperCase() === 'ZHISHEN-110D'){
        items = [{
          maxFmt: '1080p@60',
          maxFmtNum: 1920 * 1080 * 60
        }]
        return items
      }
      items = this.resolutionWithFramerateOptions.filter((item) =>{
        return item.maxFmtNum <= this.limitMaxFmt; 
      })
      return items;
    },
    devs() {
      return this.media.outputDev.devs.concat(this.media.outputZsDev.devs);
    }
  },
  watch: {
    mute(newVal, oldVal) {
      this.onAudioChange();
    },
    gain(newVal, oldVal) {
      if (oldVal) {
        this.onAudioChange();
      }
    },
    phant(newVal, oldVal) {
      if (oldVal) {
        this.onAudioChange();
      }
    },
    sens(newVal, oldVal) {
      if (oldVal) {
        this.onAudioChange();
      }
    },
    bright: function(newVal, oldVal) {
      if (oldVal) {
        this.onVedioChange();
      }
    },
    saturation: function(newVal, oldVal) {
      if (oldVal) {
        this.onVedioChange();
      }
    },
    hue: function(newVal, oldVal) {
      if (oldVal) {
        this.onVedioChange();
      }
    },
    contrast: function(newVal, oldVal) {
      if (oldVal) {
        this.onVedioChange();
      }
    }
  },
  data() {
    return {
      isCustom: false,
      resolutionWithFramerateOption:'',
      resolution: {
        x: 0,
        y: 0
      },
       sdiOptions:[
         {
          maxFmt: '1080p@60',
          maxFmtNum: 1920 * 1080 * 60
        },
        {
          maxFmt: '1080p@50',
          maxFmtNum: 1920 * 1080 * 50
        },
        {
          maxFmt: '1080p@30',
          maxFmtNum: 1920 * 1080 * 30
        },
        {
          maxFmt: '1080p@25',
          maxFmtNum: 1920 * 1080 * 25
        },
        {
          maxFmt: '1080I@60',
          maxFmtNum: 1920 * 540 * 60
        },
        {
          maxFmt: '1080I@50',
          maxFmtNum: 1920 * 540 * 50
        },
        {
          maxFmt: '720p@60',
          maxFmtNum: 1280 * 720 * 60
        },
        {
          maxFmt: '720p@50',
          maxFmtNum: 1280 * 720 * 50
        },
      ],
      resolutionWithFramerateOptions: [
        {
          maxFmt: '4K@60',
          maxFmtNum: 3840 * 2160 * 60
        },
        {
          maxFmt: '4K@50',
          maxFmtNum: 3840 * 2160 * 50
        },
        {
          maxFmt: '4K@30',
          maxFmtNum: 3840 * 2160 * 30
        },
        {
          maxFmt: '4K@25',
          maxFmtNum: 3840 * 2160 * 25
        },
        {
          maxFmt: '1920x1200@60',
          maxFmtNum: 1920 * 1200 * 60
        },
        {
          maxFmt: '1080p@60',
          maxFmtNum: 1920 * 1080 * 60
        },
        {
          maxFmt: '1080p@50',
          maxFmtNum: 1920 * 1080 * 50
        },
        {
          maxFmt: '1080p@30',
          maxFmtNum: 1920 * 1080 * 30
        },
        {
          maxFmt: '1080p@25',
          maxFmtNum: 1920 * 1080 * 25
        },
        {
          maxFmt: '1680x1050@60',
          maxFmtNum: 1680 * 1050 * 60
        },
        // {
        //   maxFmt: '1400x1050@60',
        //   maxFmtNum: 1400 * 1050 * 60
        // },
        {
          maxFmt: '1440x900@60',
          maxFmtNum:  1440 * 900 * 60
        },
        // {
        //   maxFmt: '1368x768@60',
        //   maxFmtNum: 3840 * 2160 * 60
        // },
        {
          maxFmt: '1366x768@60',
          maxFmtNum: 1366 * 768 * 60
        },
        {
          maxFmt: '1360x768@60',
          maxFmtNum: 1360 * 768 * 60
        },
        {
          maxFmt: '1280x1024@60',
          maxFmtNum: 1280 * 1024 * 60
        },
        // {
        //   maxFmt: '1280x960@60',
        //   maxFmtNum: 1280 * 960 * 60
        // },
        // {
        //   maxFmt: '1280x768@60',
        //   maxFmtNum: 1280 * 768 * 60
        // },
        {
          maxFmt: '720p@60',
          maxFmtNum: 1280 * 720 * 60
        },
        {
          maxFmt: '720p@50',
          maxFmtNum: 1280 * 720 * 50
        },
        {
          maxFmt: '1024x768@60',
          maxFmtNum: 1024 * 768 * 60
        },
        {
          maxFmt: '800x600@60',
          maxFmtNum: 800 * 600 * 60
        },
        {
          maxFmt: '720x576@50',
          maxFmtNum: 720 * 576 * 60
        },
        {
          maxFmt: '720x480@60',
          maxFmtNum: 720 * 480 * 60
        },
        {
          maxFmt: '640x480@60',
          maxFmtNum: 640 * 480* 60
        }        
      ],
      limitMaxFmt: 0,
      maxFmt: '',
      curChangeTimer: null,
      isCurRowChange: false,
      show: false,
      currentRow: {},
      index: 0,
      dev: "",
      devtype: "",
      curType: '',
      mute: false,
      gain: 50,
      sens: 50,
      phant: false,
      signalType: "dvi",
      signalTypes: [
        "dvi",
        "hdmi"
        // "vga",
        // "yprpb",
        // "dvi+vga",
        // "dvi+yprpb",
        // "hdmi+vga",
        // "hdmi+yprpb",
        // "sdi"
      ],
      resolutions: ["720P", "1080P", "4K"],
      framerates: [25, 30, 50, 60],
      frameRate: 0,
      bright: 0,
      contract: 0,
      hue: 0,
      contrast: 0,
      saturation: 0,
      columns: [
        {
          label: this.$t("message.name"),
          prop: "name"
        },
        {
          label: this.$t("message.medias.type"),
          prop: "type"
        },
        {
          label: this.$t("message.medias.maxFmt"),
          prop: "maxFmt"
        },
        {
          label: this.$t("message.medias.frameRate"),
          prop: "framerate"
        }
      ]
    };
  },
  components: {
    setForm,
    mylist,
    topTable
  },
  methods: {
    onAudioChange() {
      if (this.isCurRowChange) {
        return;
      }
      var option = {
        mute: this.mute,
        gain: this.gain,
        sens: this.sens,
        phant: this.phant
      };

      api.onRequest(
        "$method.$set.media.mo.dev" + this.currentRow.index + ".aoParam",
        JSON.stringify(option),
        null,
        null,
        function(message, reqReply) {}.bind(this)
      );
    },
    onVedioChange() {
      if (this.showMic) {
        return;
      }
      if (this.isCurRowChange) {
        return;
      }
      var option = {
        signalType: this.currentRow.signalType,
        resolution: this.currentRow.resolution,
        framerate: JSON.parse(this.currentRow.framerate),
        colorParam: {
          bright: this.bright,
          saturation: this.saturation,
          hue: this.hue,
          contrast: this.contrast
        }
      };
      api.onRequest(
        "$method.$set.media.mo.dev" + this.currentRow.index + ".voParam",
        JSON.stringify(option),
        null,
        null,
        function(message, reqReply) {
          var res = JSON.parse(message);
          if (res.code == 0) {
          } else {
            this.showCodeMsg(res.code, this, res.msg);
            // this.notification("error", res.msg);
          }
        }.bind(this)
      );
    },
    handleCurrentChanges(val) {
      this.curType = val.type ? val.type :val.signalType;
      if(this.curType && this.curType.toUpperCase() == 'SDI'){
        this.signalTypes = ['sdi']
        
      } else{

        this.signalTypes = ['dvi', 'hdmi']
        
      }
      this.maxFmt = val.maxFmt;
      this.preventWatchWhenCurChange();
      this.currentRow = val;
      if (this.curType === 'zhishen') {
        this.show = false;
        return;
      }  
      this.mute = val.mute;
      this.gain = val.gain;
      this.phant = val.phant;
      this.sens = val.sens;
      if (this.curType && val.colorParam) {
        this.bright = val.colorParam.bright;
        this.saturation = val.colorParam.saturation;
        this.hue = val.colorParam.hue;
        this.contrast = val.colorParam.contrast;
      }
      
      this.changeResolutionByMaxfmt(val.maxFmt);
      this.showResolution(val);
      
      this.show = true;    
    },
    showResolution(param){  
      let val = JSON.parse(JSON.stringify(param))
      if(this.curType.toUpperCase() == 'SDI' || val.signalType.toUpperCase() == 'SDI') {
        val.resolution = val.resolution == '' ? '1080p' : val.resolution;
      }
      // if(this.curType.toUpperCase() == 'SDI' || val.signalType.toUpperCase() == 'SDI') {
      //   let fmtArr = val.maxFmt.split('@');
      //   val.resolution = fmtArr[0];
      //   val.framerate = fmtArr[1];
      // }
      var tmp = '';
      tmp =  this.showResolutionWithFramerateOptions.filter((item) =>{        
        return item.maxFmt.toUpperCase() == `${val.resolution}@${val.framerate}`.toUpperCase();
      })  
      if(tmp && tmp.length){
        this.resolutionWithFramerateOption = tmp[0].maxFmt;
        this.isCustom = false;
      } else{
        var tmpArr = [];        
        if (val && val.resolution && val.resolutions.toUpperCase().includes('X')) {
          tmpArr = val.resolution.split('x') || val.resolution.split('x');
        }
        
        if(tmpArr){
          this.resolution.x = tmpArr[0];
          this.resolution.y = tmpArr[1];
        }
        this.isCustom = true;
      }
    },
    onSaveVedio() {
      if(this.expandMaxFmt){
        return;
      }
      if (
        this.errors.has(this.$t("message.medias.resolution")) ||
        this.errors.has(this.$t("message.medias.framerate"))
      ) {
        return;
      }
      var req = {};
      if(this.isCustom){

        
        req = {
          resolution: this.resolution.x + 'x' + this.resolution.y,
          framerate: JSON.parse(this.currentRow.framerate)
        }
      } else{
          var arr = this.resolutionWithFramerateOption.split('@');
          req = {
            resolution: arr[0],
            framerate: JSON.parse(arr[1])
          }        
        
      }
       var option = {       
          signalType: this.currentRow.signalType,
          resolution: req.resolution,
          framerate: req.framerate,
          colorParam: {
            bright: this.bright,
            saturation: this.saturation,
            hue: this.hue,
            contrast: this.contrast
          }
        }
      if(this.curType.toUpperCase() == 'SDI' || this.currentRow.signalType.toUpperCase() == 'SDI') {
       
        let inx = this.currentRow.name.replace(/[^0-9]/ig,"")
        var apiUrl = `$method.$set.${this.system.curTopic}.mo.dev.` + inx + ".voParam"
        
      }else {
        apiUrl = "$method.$set.media.mo.dev" + this.currentRow.index + ".voParam"
        
      
      };
       api.onRequest(
          apiUrl,
          JSON.stringify(option),
          null,
          null,
          function(message, reqReply) {
            var res = JSON.parse(message);
            if (res.code == 0) {
              this.notification("Success", "");
            } else {
              this.showCodeMsg(res.code, this, res.msg);
            }
            ebus.emit("getOutputDevInfo", this);
          }.bind(this)
        );
    },
    onChange() {
      ebus.emit("getOutputDevInfo", this);
    },
    preventWatchWhenCurChange() {
      this.isCurRowChange = true;
      this.curChangeTimer = setTimeout(() => {
        this.isCurRowChange = false;
      }, 200);
    },
    exportEDID() {
      api.onRequest(
        "$method.$exportEDID.media.mo.dev" + this.currentRow.index,
        null,
        null,
        null,
        function(message, reqReply) {
          var res = JSON.parse(message);
          if (res.code == 0) {
            var url;
            if (res.data.BinFile.indexOf("default") > -1) {
              url =
                "http://" +
                getHostName() +
                ":8080/_default" +
                res.data.BinFile.substring(
                  res.data.BinFile.indexOf("default") + 7
                );
            } else {
              url =
                "http://" +
                getHostName() +
                ":8080/_resources" +
                res.data.BinFile.substring(
                  res.data.BinFile.indexOf("resources") + 7
                );
            }
            var fileName = res.data.BinFile.split("/")[
              res.data.BinFile.split("/").length - 1
            ];
            downloadFile(url, fileName);
          } else {
            this.showCodeMsg(res.code, this, res.msg);
          }
        }.bind(this)
      ).then(
        msg => {},
        err => {
          this.notification('error', this.$t('message.timeout'));
        }
      );
    },
    changeResolutionByMaxfmt(maxFmt) {
      if (maxFmt) {
        maxFmt = maxFmt.toUpperCase();
      }  else {
        return
      }     
      //限制单项最大显示格式
      var maxframeRate = '';//允许最大分辨率
      var maxResolution = '';//允许最大帧率
      if (maxFmt && maxFmt.includes('@')) {
        maxframeRate = maxFmt.split("@")[0];//允许最大分辨率
        maxResolution = maxFmt.split("@")[1];//允许最大帧率
      } else {
        if (maxFmt && maxFmt.includes('P')) {
          maxframeRate = maxFmt.split("P")[0];//允许最大分辨率
          maxResolution = maxFmt.split("P")[1];//允许最大帧率
        } else if (maxFmt && maxFmt.includes('K')) {
          maxframeRate = maxFmt.split("K")[0];//允许最大分辨率
          maxResolution = maxFmt.split("K")[1];//允许最大帧率
        }        
      } 
      

      if (maxframeRate == "1080P" || maxframeRate == "1080") {
        this.resolutions = ["720P", "1080P"];
      } else if (maxframeRate == "720P" || maxframeRate == "720") {
        this.resolutions = ["720P"];
      } else {
        this.resolutions = ["720P", "1080P", "4K"];
      }

      //限制单项最大帧率
      if (maxResolution && maxResolution == '50') {
        this.framerates = [25, 30, 50];
      } else if (maxResolution && maxResolution == '30') {
        this.framerates = [25, 30];
      } else if (maxResolution && maxResolution == '25') {
        this.framerates = [25];
      } else {
        this.framerates = [25, 30, 50, 60];
      }

      //限制组合起来的能力 如：若最大支持分辨率和帧率为1080P@60，只能选最大为 1920X1080@60， 1921X1080@60就超过了
      var limitMaxFmt = 3840 * 2160 * 60; //按照4K@60的标准
      if(maxframeRate == '4K' || maxframeRate == '4'){
        limitMaxFmt = 3840 * 2160 * parseInt(maxResolution);
      } else if(maxframeRate == '1080P' || maxframeRate == '1080'){
        limitMaxFmt = 1920 * 1080 * parseInt(maxResolution);
      } else if(maxframeRate && maxframeRate.toUpperCase().includes('X')){
        var frameRateArr = maxframeRate.toUpperCase().split('X');
        limitMaxFmt = frameRateArr[0] * frameRateArr[1] * parseInt(maxResolution);
      }
      this.limitMaxFmt = limitMaxFmt;

    },
    showResolutionOrFmt (str, index) {
      if (str) {
        str = str.toUpperCase();
      }      
      if (str && str.includes('@')) {
        return str.split('@')[index];
      } else {        
        if (str && str.includes('P')) {
          if (index == 0) {
            return str.substr(0, str.indexOf('P') + 1)
          } else {
            return str.split('P')[1]
          }
          
        } else if (str && str.includes('K')) {
          if (index == 0) {
            return str.substr(0, str.indexOf('K') + 1)
          } else {
            return str.split('K')[1]
          }
        } else return ''
      }
    }
  }
};
</script>

<style scoped>

</style>

